/*
 * @Author: moxunjingmu
 * @Date: 2025-03-04 15:26:49
 * @Description: 
 */
import React from "react";
import {
  StyleSheet,
  View,
  Text,
  Switch,
  ScrollView,
  Pressable,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Ionicons } from "@expo/vector-icons";
import { useAppStore } from "@/store/app-store";
import { useUserStore } from "@/store/user-store";
import { useTheme } from "@/hooks/useTheme";
import Button from "@/components/Button";

export default function SettingsScreen() {
  const {
    notificationsEnabled,
    setNotificationsEnabled,
  } = useAppStore();
  const { colors, isDark, mode, setMode } = useTheme();
  const resetProgress = useUserStore((state) => state.resetProgress);
  const handleResetProgress = () => {
    // In a real app, you'd show a confirmation dialog here
    resetProgress();
  };
  
  // 设置深色模式
  const handleToggleDarkMode = (value: boolean) => {
    setMode(value ? 'dark' : 'light');
  };
  
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={["bottom"]}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.header}>
          <Text style={[styles.title, { color: colors.text }]}>设置</Text>
          <Text style={[styles.subtitle, { color: colors.subtext }]}>自定义你的体验</Text>
        </View>
        <View style={styles.section}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>外观</Text>
          <View style={[styles.settingItem, { backgroundColor: colors.card, borderColor: colors.border }]}>
            <View style={styles.settingInfo}>
              <Ionicons name="moon" size={20} color={colors.primary} />
              <Text style={[styles.settingLabel, { color: colors.text }]}>深色模式</Text>
            </View>
            <Switch
              value={isDark}
              onValueChange={handleToggleDarkMode}
              trackColor={{
                false: colors.inactive,
                true: colors.primary,
              }}
              thumbColor={colors.text}
            />
          </View>
        </View>
        <View style={styles.section}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>通知</Text>
          <View style={[styles.settingItem, { backgroundColor: colors.card, borderColor: colors.border }]}>
            <View style={styles.settingInfo}>
              <Ionicons name="notifications-outline" size={20} color={colors.primary} />
              <Text style={[styles.settingLabel, { color: colors.text }]}>每日提醒</Text>
            </View>
            <Switch
              value={notificationsEnabled}
              onValueChange={setNotificationsEnabled}
              trackColor={{
                false: colors.inactive,
                true: colors.primary,
              }}
              thumbColor={colors.text}
            />
          </View>
        </View>
        <View style={styles.section}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>数据</Text>
          <Pressable
            style={({ pressed }) => [
              styles.settingItem,
              { backgroundColor: colors.card, borderColor: colors.border },
              pressed && [styles.settingItemPressed, { backgroundColor: isDark ? "#252525" : "#E5E7EB" }],
            ]}
            onPress={handleResetProgress}
          >
            <View style={styles.settingInfo}>
              <Ionicons name="trash-outline" size={20} color={colors.error} />
              <Text style={[styles.settingLabel, { color: colors.error }]}>
                重置进度
              </Text>
            </View>
            <Ionicons name="chevron-forward" size={20} color={colors.subtext} />
          </Pressable>
        </View>

        <View style={styles.section}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>关于</Text>
          <Pressable
            style={({ pressed }) => [
              styles.settingItem,
              { backgroundColor: colors.card, borderColor: colors.border },
              pressed && [styles.settingItemPressed, { backgroundColor: isDark ? "#252525" : "#E5E7EB" }],
            ]}
          >
            <View style={styles.settingInfo}>
              <Ionicons name="information-circle-outline" size={20} color={colors.primary} />
              <Text style={[styles.settingLabel, { color: colors.text }]}>应用版本</Text>
            </View>
            <Text style={[styles.versionText, {color: colors.subtext}]}>1.0.0</Text>
          </Pressable>
        </View>
        <View style={styles.footer}>
          <Button
            title="发送反馈"
            variant="outline"
            fullWidth
            onPress={() => {}}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  header: {
    marginBottom: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: "700",
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 16,
  },
  settingItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderRadius: 12,
    padding: 16,
    marginBottom: 8,
    borderWidth: 1,
  },
  settingItemPressed: {
    opacity: 0.8,
  },
  settingInfo: {
    flexDirection: "row",
    alignItems: "center",
  },
  settingLabel: {
    fontSize: 16,
    marginLeft: 12,
  },
  versionText: {
    fontSize: 14,
  },
  footer: {
    marginTop: 24,
    marginBottom: 40,
  },
});
